// import React, { useReducer } from 'react';
// import ReactDOM from 'react-dom';
import React, { useReducer } from './myReact/react';
import ReactDOM from './myReact/react-dom';
import './index.css';
const FunctionComponent = (props) => {
  const [count, dispatch] = useReducer(v => v + 1, 0)
  return <div className='border fn-box'>
    {/* 以现有的例子，不能实现下面这一行 */}
    <p >这是函数组件</p>
    <p className='fn-content'>{props.name}</p>
    <div>count: 
      <button onClick={() => {
        dispatch()
      }}>{count}</button>
    </div>
  </div >
}

const jsx = <div id='border' className='border'>
  <h1>这是h1标签,自己实现react-dom</h1>
  <a href='#'>这是a标签</a>
  <p>
    <span>这是p标签中的span标签</span>
    <strong>这是p标签中的strong标签</strong>
  </p>
  <FunctionComponent name='关中刀客' />
</div>
console.log('~~document.querySelector("#root")', document.querySelector('#root'))
ReactDOM.render(
  jsx,
  document.querySelector('#root')
);
